<template>
  <div>
    <div
      id="gaugeChart"
      style="width: 100%; height: 400px; margin: 0 auto"
    ></div>
  </div>
</template>



<script>
var echarts = require("echarts");
let timer = null;
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
}
export default {
  data() {
    return {};
  },
  mounted() {
    var option = {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%",
      },

      series: [
        {
          name: "Pressure",
          type: "gauge",
          axisLine: {
            show: true, //是否显示仪表盘轴线。
          },
          splitLine: {
            show: false, //是否显示分隔线。
          },
          clockwise: true, //仪表盘刻度是否是顺时针增长。
          axisTick: false, //是否显示刻度
          splitNumber: 10, //分割线之间的刻度

          axisLine: {
            lineStyle: {
              color: [
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.1,
                      color: "#ed3f14",
                    },
                    {
                      offset: 0.5,
                      color: "#ff9900",
                    },
                    {
                      offset: 1,
                      color: "#19be6b",
                    },
                  ]),
                ],
              ],
              width: 20,
            },
          },

          detail: {
            valueAnimation: true,
            formatter: "{value}分",
          },
          data: [
            {
              value: 90,
              name: "系统指数",
            },
          ],
        },
      ],
    };

    var chartDom = document.getElementById("gaugeChart");
    var myChart = echarts.init(chartDom);
    myChart.setOption(option);

    timer = setInterval(() => {
      // option.series[0].data[0].value = Math.floor(Math.random() * 41) + 60;
      option.series[0].data[0].value = getRandomInt(80,100);
      console.log(1);
      myChart.setOption(option);
    }, 5000);
    this.$nextTick((_) => {
      myChart.resize();
    });
  },
  destroyed() {
    clearInterval(timer);
  },
};
</script>